import { Scene, PointLayer } from '@antv/l7';
import * as allMap from '@antv/l7-maps';

export function MapRender(option:{
    map:string
    renderer:string
}) {
    const scene = new Scene({
        id: 'map',
        renderer: option.renderer === 'device'? 'device' : 'regl',
        map: new allMap[option.map || 'Map']({
            style: 'light',
            center: [121.435159, 31.256971],
            zoom: 14.89,
            minZoom: 10
        })
    });
    scene.on('loaded', () => {
        fetch(
            'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
        )
            .then(res => res.json())
            .then(data => {
                const pointLayer = new PointLayer({})
                    .source(data, {
                        parser: {
                            type: 'json',
                            x: 'longitude',
                            y: 'latitude'
                        }
                    })
                    .shape('name', [
                        'circle',
                        'triangle',
                        'square',
                        'pentagon',
                        'hexagon',
                        'octogon',
                        'hexagram',
                        'rhombus',
                        'vesica'
                    ])
                    .size('unit_price', [10, 25])
                    .active(true)
                    .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
                    .style({
                        opacity: 1,
                        strokeWidth: 2
                    });

                scene.addLayer(pointLayer);
                setTimeout(() => {
                    console.log('start update')
                    pointLayer.size(30)
                    scene.render()
                    console.log('update')
                    
                }, 1000);
            });
    });

}
